@charset "utf-8";

.container { float: left; margin: 0 2%; position: relative; width: 28%; margin-bottom: 20px;}
.container:first-of-type { margin-left: 4%; }
.container:last-of-type { margin-right: 4%; }
.film { transform-style: preserve-3d; transition: all 1s; }
.film .face img { width: 100%; float: inherit; margin: 0; }
.container:hover .film { transform: rotateY(180deg); }
.face { backface-visibility: hidden; position: absolute; }
.front { z-index: 3; }
.container:hover .front { z-index: 1; }
.back { transform: rotateY(180deg); background-color: #3b3b3b; z-index: 2; text-align: center; }
.back h5 { font-size: 50px; color: red; -webkit-animation-name: shining; -webkit-animation-duration: 1500ms; -webkit-animation-iteration-count: infinite; -webkit-animation-timing-function: ease-in-out;  }
@media (max-width: 768px) {
	.container { width: 96%; margin: 20px 0; float: inherit; padding: 0 2%; }
	.container:first-of-type { margin-left: 0; }
	.container:last-of-type { margin-right: 0; }
}